<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-date-picker
        v-model="formInline.begin"
        type="week"
        placeholder="开始时间"
      >
      </el-date-picker>
      -
      <span class="demonstration"></span>
      <el-date-picker
        v-model="formInline.end"
        type="week"
        placeholder="结束时间"
      >
      </el-date-picker>

      <el-form-item>
        <!-- 查询 -->
        <el-button type="primary" @click="onSubmit"
          ><i class="el-icon-search"></i
        ></el-button>
      </el-form-item>
    </el-form>

    <!--echarts表画布-->
    <div class="HelloWorld echart-box" ref="myechart" id="main"></div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      //搜索数据
      formInline: {
        begin: "",
        end: "",
      },
      begin: "",
      end: "",
      ll: "",
      //接收查到的集合
      record: [],
      // 定义图表，各种参数
      option: {
        title: {
          text: "销售金额折线图",
        },
        tooltip: {},
        legend: {
          data: [],
        },
        xAxis: {
          type: "category",
          data:  [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            smooth: true,
            type: "line",
          },
        ],
      },
    };
  },
  methods: {
    drawLine() {
      var echarts = require("echarts");
      let myechart = echarts.init(document.getElementById("main")); //初始化一个echarts
      myechart.setOption(this.option); //setOption 用this.option中的数据开始作图
    },
    //搜索方法
    onSubmit() {
      var formatTime;
      //开始时间格式转换
      if (this.formInline.begin.getMonth() < 10) {
        formatTime =
          this.formInline.begin.getFullYear() +
          "-0" +
          (this.formInline.begin.getMonth() + 1) +
          "-" +
          this.formInline.begin.getDate();
      } else if (this.formInline.begin.getDate() < 10) {
        formatTime =
          this.formInline.begin.getFullYear() +
          "-" +
          (this.formInline.begin.getMonth() + 1) +
          "-0" +
          this.formInline.begin.getDate();
      } else {
        formatTime =
          this.formInline.begin.getFullYear() +
          "-" +
          (this.formInline.begin.getMonth() + 1) +
          "-" +
          this.formInline.begin.getDate();
      }
      //结束时间格式转换
      var formatTime1;
      if (this.formInline.end.getMonth() < 10) {
        formatTime1 =
          this.formInline.end.getFullYear() +
          "-0" +
          (this.formInline.end.getMonth() + 1) +
          "-" +
          this.formInline.end.getDate();
      } else if (this.formInline.end.getDate() < 10) {
        formatTime1 =
          this.formInline.end.getFullYear() +
          "-" +
          (this.formInline.end.getMonth() + 1) +
          "-0" +
          this.formInline.end.getDate();
      } else {
        formatTime1 =
          this.formInline.end.getFullYear() +
          "-" +
          (this.formInline.end.getMonth() + 1) +
          "-" +
          this.formInline.end.getDate();
      }
      //发送ajax请求
      this.$axios
        .post("/ever-salerecord/reportMoney", {
          begin: this.formInline.begin,
          end: this.formInline.end,
        })
        .then((res) => {
          //数组形式
          this.record = res.data;
          for (var i = 0; i < this.record.length; i++) {
            this.option.xAxis.data.push(this.record[i].stime);
            this.option.series[0].data.push(this.record[i].money);
          }
          this.drawLine();
          console.log(this.record), (self.tableData = res.data);
        });
    },
  },
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.HelloWorld {
  width: 1000px;
  height: 600px;
  background: #eef5b1;
  margin: 0 auto;
}
</style>